<template>
  <body>
    <div class="register">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <el-link href="#"  class="login-link"><svg style="height: 30;width: 30; color: #CDCDCD;" t="1719987254686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="128" height="128"><path d="M620.423529 1017.976471H403.576471c-198.776471 0-355.388235 0-355.388236-96.376471V903.529412c0-186.729412 156.611765-343.341176 355.388236-343.341177h216.847058c198.776471 0 355.388235 156.611765 355.388236 343.341177v18.070588c0 96.376471-168.658824 96.376471-355.388236 96.376471zM234.917647 283.105882C234.917647 132.517647 361.411765 6.023529 512 6.023529c150.588235 0 277.082353 126.494118 277.082353 277.082353 0 150.588235-126.494118 277.082353-277.082353 277.082353-150.588235 0-277.082353-126.494118-277.082353-277.082353z" fill="#cdcdcd" p-id="4552"></path></svg><p style="color: red"></p></el-link>
      <div>&nbsp;</div>
      <h3 style="font-weight: bold;">个人信息修改</h3>
      <div>&nbsp;</div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">修改密码</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </body>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

const form = reactive({
  id: '',
  password: '',
  checkPass: '',
  name: '',
  email: ''
});



const formRef = ref(null);

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('密码不能为空'));
  } else {
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
    if (!passwordRegex.test(value)) {
      callback(new Error('必须8-20位，包含大小写字母特殊字符'));
    } else {
      callback();
    }
  }
};

const validatePass2 = (rule, value, callback) => {
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (passwordRegex.test(validatePass)) {
    callback(new Error('必须8-20位，包含大小写字母特殊字符'));
  } else if (value !== form.password) {
    callback(new Error('两次输入密码不一致!'));
    ElMessage.warning('两次输入密码不一致');
  } else {
    callback();
  }
};

const checkUser = (rule, value, callback) => {
  if (!value) {
    callback(new Error('用户名不能为空'));
  } else {
    callback();
  }
};

const checkEmail = (rule, value, callback) => {
  if (!value) {
    callback(new Error('邮箱不能为空'));
  } else {
    callback();
  }
};

const rules = {
  password: [
    { validator: validatePass, trigger: 'blur' }
  ],
  checkPass: [
    { validator: validatePass2, trigger: 'blur' }
  ],
  name: [
    { validator: checkUser, trigger: 'blur' }
  ],
  email: [
    { validator: checkEmail, trigger: 'blur' }
  ]
};

const submitForm = () => {
  axios.post('http://localhost/user/edit', form)
    .then(response => {
      console.log(response.data);
      if (response.data.code === 20000) {
        ElMessage.success('修改密码成功，请重新登陆！');
        router.push('/login');
      } else {
        ElMessage.error(`失败: ${response.data.message || '未知错误'}`);
      }
    });
};

const resetForm = () => {
  formRef.value.resetFields();
};

const fetchUserInfo = async (id) => {
  try {
    const response = await axios.get(`http://localhost/user/${id}`);
    form.id = response.data.data.id;
    form.name = response.data.data.name;
    form.password = response.data.data.password;
    form.email = response.data.data.email;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    ElMessage.error('获取用户信息失败');
  }
};

onMounted(() => {
  const id = route.query.id;
  if (id) {
    fetchUserInfo(id);
  }
});
</script>
<style scoped>
body {
  background-image: url('../assets/login-bg.jpg');
  background-size: auto;
  /* 保持图片原始尺寸 */
  background-repeat: repeat;
  /* 背景图片重复 */
  background-position: center center;
  /* 背景图片在元素中居中显示 */

  display: flex;
  /* 启用Flexbox布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100%;
  /* 容器的高度 */
}

.register {
  /* color: #FFF; */
  /* background-image: url('../assets/login-header.png'); */
  border-radius: 10px;
  background-size: 40em;
  background-repeat: no-repeat;
  width: 50em;
  height: 30em;
  background-color: rgba(245, 245, 245, 0.8);
  display: flex;
  /* 启用Flexbox布局 */
  justify-content: flex-start;
  /* 靠左对齐 */
  align-items: center;
  /* 垂直居中 */
  flex-direction: column;
}


.avatar {
  width: 10em;
  border-radius: 50%;
  position: relative;
  top: -5em;
  border: 0.5em solid #FFF;
  /* 添加边框 */
}
</style>
